<template>
  <div class="friend-list-page">
    <!-- 搜索框 -->
    <div class="search-box">
      <input
          v-model="searchKeyword"
          @input="searchFriends"
          placeholder="搜索好友..."
          class="search-input"
      />
    </div>

    <!-- 好友列表容器 -->
    <div class="friend-list">
      <!-- 遍历过滤后的好友列表 -->
      <div
          v-for="friend in filteredFriends"
          :key="friend.userId"
          class="friend-item"
          @click="handleFriendClick(friend)"
      >
        <!-- 好友头像 -->
        <div class="friend-avatar">
          <img :src="friend.avatar || '/default-avatar.png'" :alt="friend.nickname" />
        </div>
        <!-- 好友信息 -->
        <div class="friend-info">
          <div class="friend-name">{{ friend.nickname }}</div>
          <!-- 显示好友的楼栋信息 -->
          <div class="friend-building">{{ formatBuildingInfo(friend) }}</div>
        </div>
        <!-- 未读消息徽章 -->
        <div class="unread-badge" v-if="getUnreadCount(friend.userId) > 0">
          {{ getUnreadCount(friend.userId) }}
        </div>
      </div>

      <!-- 空状态显示 -->
      <div v-if="filteredFriends.length === 0" class="no-friends">
        {{ searchKeyword ? '未找到相关好友' : '暂无好友' }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'FriendList',
  // 定义组件属性
  props: {
    friends: {
      type: Array,
      default: () => [] // 默认空数组
    }
  },
  // 定义组件事件
  emits: ['start-chat'],
  setup(props, { emit }) {
    const router = useRouter()
    const searchKeyword = ref('') // 搜索关键词

    /**
     * 计算属性：过滤后的好友列表
     * 根据搜索关键词过滤好友，支持昵称和楼栋搜索
     */
    const filteredFriends = computed(() => {
      // 如果没有搜索关键词，返回完整列表
      if (!searchKeyword.value.trim()) {
        return props.friends
      }

      const keyword = searchKeyword.value.toLowerCase()
      return props.friends.filter(friend =>
          friend.nickname.toLowerCase().includes(keyword) || // 昵称匹配
          friend.building?.toLowerCase().includes(keyword) // 楼栋匹配
      )
    })

    /**
     * 处理好友点击事件
     * @param {Object} friend - 点击的好友对象
     */
    const handleFriendClick = (friend) => {
      // 跳转到聊天页面，并传递来源参数
      router.push({
        path: `/chat/${friend.userId}`,
        query: {
          from: '/message?view=friendList' // 记录来源为好友列表
        }
      })
    }

    /**
     * 搜索好友处理函数
     * 由于使用了计算属性，这里只需要触发搜索关键词更新
     */
    const searchFriends = () => {
      // computed属性会自动更新，这里不需要额外操作
    }

    /**
     * 格式化楼栋信息显示
     * @param {Object} friend - 好友对象
     * @returns {string} 格式化后的地址信息
     */
    const formatBuildingInfo = (friend) => {
      if (friend.building && friend.unit && friend.room) {
        return `${friend.building}栋${friend.unit}单元${friend.room}室`
      }
      return '未设置地址'
    }

    /**
     * 获取未读消息数量（待实现）
     * @param {string} friendId - 好友ID
     * @returns {number} 未读消息数量
     */
    const getUnreadCount = (friendId) => {
      return 0 // 待实现功能
    }

    return {
      searchKeyword,
      filteredFriends,
      searchFriends,
      formatBuildingInfo,
      getUnreadCount,
      handleFriendClick
    }
  }
}
</script>

<style scoped>
.friend-list-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-box {
  padding: 15px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

.friend-list {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s; /* 悬停过渡效果 */
}

.friend-item:hover {
  background: #f9f9f9; /* 悬停背景色 */
}

.friend-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 圆形头像 */
  overflow: hidden;
  margin-right: 15px;
}

.friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充模式 */
}

.friend-info {
  flex: 1; /* 占据剩余空间 */
}

.friend-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.friend-building {
  color: #666;
  font-size: 14px;
}

.unread-badge {
  background: #ff4444;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

.no-friends {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .header {
    padding: 10px;
  }
}
</style>